<template>
  <div class="team-count">
    <div class="team-calculate">
      <div class="calculate-chart">
        <div class="calculate-left">
          <div class="calculate-left-header">
            <span>算力使用情况对比</span>
            <el-select
              size="mini"
              v-model="selectedPeriod"
              placeholder="请选择"
              @change="handlePeriodSelect">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div id="myChart" style="width: 100%; height: 292px"></div>
        </div>
        <div class="calculate-right">
          <div >
            <div class="calculate-item">
              <p class="calculate-num">{{teamCalculation.surplusCalculationNum}}</p>
              <p class="calculate-text">剩余算力</p>
            </div>
            <div class="calculate-item">
              <p class="calculate-num blue-num">{{teamCalculation.usedCalculationNum}}</p>
              <p class="calculate-text">已用算力</p>
            </div>
          </div>
        </div>
      </div>
      <div></div>
    </div>
    <div class="team-calculate-table">
      <div>
        <div class="team-calculate-table-header">
          <p>算力使用明细</p>
        </div>
        <el-table
          :data="teamUserCalculationUsage"
          style="width: 100%">
          <el-table-column
            label="成员"
            :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <div class="column-member">
                <img class="column-member-left" :src="scope.row.headUrl">
                <div class="column-member-right">
                  <p class="column-member-name">{{ scope.row.userName }}</p>
                  <p class="column-member-email">{{ scope.row.email }}</p>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="size"
            label="任务数"
            width="230px">
            <template slot-scope="scope">
              <span>{{ scope.row.taskNum }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="size"
            label="消耗算力"
            width="145px">
            <template slot-scope="scope">
              <span>{{ scope.row.usedCalculationNum.toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="size"
            label="状态"
            width="148px">
            <template slot-scope="scope">
              <span>{{ scope.row.userStatus === 0 ? scope.row.userRole === 1 ? '管理员' : '成员' : '已退出' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="size"
            label="使用团队算力"
            v-if="showActionColumn"
            width="254px">
            <template slot-scope="scope">
              <!-- <a-switch checkedChildren="启用" unCheckedChildren="禁用" :checked="scope.row.powerStatus === 0" @change='changePowerStatus'/> -->
              <span v-if="scope.row.userRole === 1">-</span>
              <a-switch
                v-else
                :class="{'switch-btn': scope.row.userStatus}"
                checkedChildren="启用"
                unCheckedChildren="禁用"
                :checked="scope.row.powerStatus === 0"
                @change='changePowerStatus($event, scope.row)' />
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="basePagenate">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="pageSize"
          :current-page="pageNumber"
          :total="total"
          layout="prev, pager, next">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { initChart, drawLine } from '@/common/js/echarts'
import { getTeamCalculationRecentUsage, getTeamUserCalculationRecentUsage, getTeamCalculation, updatePowerstatus } from '@/api/team'
import qs from 'qs'

export default {
  data () {
    return {
      // 选择时间周期
      selectedPeriod: 7,
      // 每页条数
      pageSize: 10,
      // 当前页
      pageNumber: 1,
      // 总数
      total: 1,
      options: [
        {
          value: 7,
          label: '最近7天'
        },
        {
          value: 15,
          label: '最近15天'
        },
        {
          value: 30,
          label: '最近30天'
        }
      ],
      // 团队近期算力使用
      teamRecentCalculationUsageData: [],
      // 团队用户的算力使用
      teamUserCalculationUsage: [],
      myChart: '',
      teamCalculation: {
        surplusCalculationNum: 0,
        usedCalculationNum: 0
      },
      showActionColumn: false
    }
  },
  created () {
    this.$nextTick(function () {
      window.addEventListener('resize', this.resize)
    })
  },
  mounted () {
    this._getTeamCalculationRecentUsage(this.selectedPeriod)
    this._getTeamUserCalculationRecentUsage()
    this._getTeamCalculation()
  },
  methods: {
    // 绘制图表
    drawChart (xData, yData) {
      let insChart = initChart('myChart')
      this.myChart = insChart
      insChart = drawLine(this.myChart, xData, yData)
      this.myChart.resize()
    },
    resize: function () {
      if (this.myChart) this.myChart.resize()
    },
    // 选择算力使用情况筛选日期
    handlePeriodSelect (val) {
      this._getTeamCalculationRecentUsage(val)
    },
    // 分页
    handleSizeChange (val) {
      this.pageSize = val
      this.pageNumber = 1
      this._getTeamUserCalculationRecentUsage()
    },
    handleCurrentChange (val) {
      this.pageNumber = val
      this._getTeamUserCalculationRecentUsage()
    },
    // 状态更改
    changePowerStatus (checked, row) {
      if (row.userStatus === 1) {
        return false
      }
      let data = qs.stringify({
        teamId: this.$route.query.id,
        userId: row.userId,
        powerStatus: checked ? 0 : 1
      })
      updatePowerstatus(data).then(res => {
        if (res.message.code === 0) {
          this._getTeamUserCalculationRecentUsage()
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 查询团队近期算力使用情况
    _getTeamCalculationRecentUsage (selectedPeriod) {
      let query = `?daysCount=${selectedPeriod}&teamId=${this.$route.query.id}`
      getTeamCalculationRecentUsage(query).then(res => {
        if (res.message && res.message.code === 0) {
          let xData = []
          let yData = []
          res.data.map(item => {
            xData.push(item.useData)
            yData.push(item.userdCalculation)
          })
          this.drawChart(xData, yData)
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 查询团队用户的算力使用情况
    _getTeamUserCalculationRecentUsage () {
      let query = `?teamId=${this.$route.query.id}&pageNum=${this.pageNumber}&pageSize=${this.pageSize}`
      getTeamUserCalculationRecentUsage(query).then(res => {
        if (res.message && res.message.code === 0) {
          this.total = res.data.total
          this.teamUserCalculationUsage = []
          this.teamUserCalculationUsage = res.data.list
          this.teamUserCalculationUsage.map(item => {
            if (item.userRole === 1) {
              if (item.userId === this.userInfo.userId) {
                this.showActionColumn = true
              }
            }
          })
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 查询团队用户的算力使用情况
    _getTeamCalculation () {
      const data = qs.stringify({
        teamId: this.$route.query.id
      })
      getTeamCalculation(data).then(res => {
        if (res.message && res.message.code === 0) {
          if (res.data) {
            this.teamCalculation = res.data
            this.teamCalculation.surplusCalculationNum = this.teamCalculation.surplusCalculationNum.toFixed(2)
            this.teamCalculation.usedCalculationNum = this.teamCalculation.usedCalculationNum.toFixed(2)
          }
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  }
}
</script>

<style lang="stylus">
.team-count
  .calculate-chart
    display flex
    width 100%
    height 342px
    margin-bottom 25px
    .calculate-left
      width 939px
      border 1px solid #D9D9D9
      border-right none
      padding 25px 0
      .calculate-left-header
        font-size 16px
        padding 0 40px
        color #2196F3
        display flex
        justify-content space-between
        .select-box
          font-size 14px
          border 1px solid #2196F3
          border-radius 2px
    .calculate-right
      width 222px
      border 1px solid #D9D9D9
      display flex
      justify-content center
      align-items center
      .calculate-item
        padding 29px 0
        text-align center
        .calculate-num
          font-size 30px
          color #1EC063
          margin-bottom 13px
        .calculate-text
          font-size 14px
          color #2D323B
        .blue-num
          color #2196F3
    .el-input__inner
      border-color #B0D5FF
      color #2196F3
      height 32px
      width 105px
      font-size 14px
    .el-select__caret
      display flex
      justify-content center
      align-items center
    .el-icon-arrow-up
      &::before
        content ""
        color #2196F3
        width 0
        height 0
        border-right 5px solid transparent
        border-left 5px solid transparent
        border-bottom 10px solid #2196F3
  .team-calculate-table
    border 1px solid #D9D9D9
    .team-calculate-table-header
      padding 15px 40px
      background #F4F7F8
      font-size 16px
      color #2196F3
      border-bottom 1px solid #d9d9d9
    .column-member
      display flex
      align-items center
      .column-member-left
        width 33px
        height 33px
        margin-right 11px
        font-size 14px
        color #2D323B
      .column-member-name
        font-weight 600
      .column-member-email
        color #666666
    .el-table
      .cell
        font-size 14px
        color #2D323B
      th>.cell
        font-weight 600
      tr>td:first-child, tr>th:first-child
        .cell
          padding-left 40px
    .el-table th
      border none
      border-bottom 1px solid #ebeef5
    .el-table .el-table__body-wrapper
      border none
    .switch-btn
      background-color #ccc!important
      cursor not-allowed
    .ant-switch-checked
      background-color #5FBA7D
</style>
